<div class="playdemo">
  <div class="flex-ctrl">
    <div class="buttion-item-icon last-node" @click="getLastNode"></div>
    <div class="buttion-item-icon play-node" @click="autoPlayDemo"></div>
    <div class="buttion-item-icon next-node" @click="getNextNode"></div>
    <div class="buttion-item-icon end-node" @click="closeDemoPanel"></div>
  </div>

  <div v-if="currentState==1" class="start-background">
    <div class="text-container">
      <span size="large" class="w-50px startName" >
        {{startName}}
      </span>
      <span size="small" class="w-50px startID" >
        {{startID}}
      </span>
    </div>

  </div>

  <div v-if="currentState==2||currentState==3||currentState==4" style="height: 100%;width: 100%">
    <img v-if="locationImgSrc != ''||locationImgSrc" :src="locationImgSrc" class="location-background location-pic">
    <img v-if="leftRoleImgSrc != ''||leftRoleImgSrc" :src="leftRoleImgSrc" class="left-item left-role-pic">
    <img v-if="rightRoleImgSrc != ''||rightRoleImgSrc" :src="rightRoleImgSrc" class="right-item right-role-pic">
    <div class="dialogue-background">
      <div class="name-left-box">
        {{leftRoleName}}
      </div>
      <div class="text-box">
        {{dialogueContent}}
      </div>
      <div class="name-right-box">
        {{rightRoleName}}
      </div>
    </div>
  </div>
  <div v-if="currentState==4" class="choice-container">
    <el-button class="choice-item-icon" v-for="item in choiceList">{{item.choice_content}}</el-button>
  </div>
  <div v-if="currentState==5" style="height: 100%;width: 100%">
    <div class="item-background fight-pic"></div>

    <div class="enemy-grid">
      <div v-for="item in fightList">
        <div class="enemy-container">
          <div class="enemy-pic"></div>
          <span size="small" class="w-50px" style="font-size: 20px;  color: white  ;  margin-left: 50px;" truncated>
            {{item.fight_id}}
          </span>
        </div>
      </div>
    </div>
    <div class="decide-container">
      <el-button class="decide-item">胜利</el-button>
      <el-button class="decide-item">失败</el-button>
    </div>
  </div>
  <div v-if="currentState==6" style="height: 100%;width: 100%">
    <div class="item-background reward-background" style="margin-left:30px"></div>
    <div class="reward-grid">
      <div v-for="item in rewardList" class="reward-container">
        <div class="reward-pic"></div>
        <span class="w-50px" style="font-size: 20px; color: white  ;" truncated>
          {{item.reward_name}}
        </span>
        <span class="w-50px" style="font-size: 20px; color: white  ;" truncated>
          {{item.reward_value}}
        </span>
      </div>
    </div>
  </div>

  <div v-if="currentState==7" class="end-background"></div>
  
</div>